<template>
  <el-dialog title="导入" :visible.sync="export_open" width="800px" append-to-body :before-close="close">
    <el-form ref="form" label-width="80px">
      <el-form-item label="模板下载">
        <el-button type="primary" size="mini" @click="downTemplate">点击下载</el-button>
      </el-form-item>
      <el-form-item label="上传文件">
        <el-upload
          ref="upload"
          class="upload-demo"
          :headers="importHeaders"
          :action="url.import"
          :on-success="handleSuccess"
          :on-change="handleImport"
          :file-list="fileList"
          :multiple="false"
          :auto-upload="false"
          :limit="1"
          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
        >
          <el-button size="mini" type="success">选择文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传csv/xlsx/xls文件</div>
        </el-upload>
      </el-form-item>
      <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
        <el-col :span="24">
          <el-button type="primary" size="medium" @click="submitUpload">导 入</el-button>
          <el-button size="medium" @click="close()">关 闭</el-button>

        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { downTemplate } from '@/api/order'
import { mapGetters } from 'vuex'
export default {
  name: 'Import',
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  props: {
    export_open: {
      type: Boolean
    }
  },
  data() {
    return {
      importHeaders: { authorization: 'Bearer ' + this.token },
      url: {
        import: ''
      },

      fileList: []
    }
  },
  methods: {
    // 下载模板
    downTemplate() {
      const that = this
      downTemplate({ name: 'customsCode' }).then(response => {
        if (response.code === 10000) {
          window.open(response.data.url)
        } else {
          that.$message.error(response.message)
        }
      })
    },
    // 导入提交
    submitUpload() {
      this.$refs.upload.submit()
    },
    // 导入成功提示
    handleSuccess(response, file, fileList) {
      // console.log(response)
      if (response.code === 10000) {
        this.$message.success(response.message)
        this.$parent.getList()
        this.$emit('update:export_open', false)
      } else {
        this.$message.error(response.message)
      }
    },
    // 打开导入弹窗
    handleImport() {
      this.importHeaders.authorization = 'Bearer ' + this.token
      this.url.import = process.env.VUE_APP_BASE_API + '/customscode/importCustomscode'
    },
    close() {
      this.$emit('update:export_open', false)
    }
  }
}
</script>
